<template lang="pug">
  layout-master
    div.main(slot="main")
      div.tit 选择试题
      ul.subject-list
        router-link.subject-list--item(v-for="(item,idx) in subjectList" v-bind:key="idx" tag="li" v-bind:to="{name:'QuestionsList',params:{id:item.id,subjectVal:item.subjectVal,teacherType:item.teacherType}}")
          div.txt {{item.title}}
</template>

<script type="text/ecmascript-6">
  import LayoutMaster from '../layout/Master'

  export default {
    data() {
      return {
        userInfo: {},
        subjectList: []
      }
    },
    mounted() {
      let _userInfo = this.$KalixCatch.get('USER_INFO')
      if (_userInfo) {
        this.userInfo = JSON.parse(_userInfo)
      }
      this.getSubjectList()
    },
    methods: {
      async getSubjectList() {
        let {data: {data}} = await this.$http.get(`/camel/rest/examscores/subjects`, {
          params: {
            userId: this.userInfo.userId
          }
        })
        if (data && data.length) {
          data.forEach(item => {
              this.subjectList.push({
                id: item.examId,
                title: item.subject,
                subjectVal: item.subjectVal,
                teacherType: item.teacherType
              })
            }
          )
          this.userInfo.teacherType = data[0].teacherType
          this.$KalixCatch.save('USER_INFO', JSON.stringify(this.userInfo))
        }
      }
    },
    components: {
      LayoutMaster
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .main
    width 746px
    margin 0 auto
    padding-top 133px
    .tit
      font-size 18px
      color #000000
      height 20px
      line-height 20px
      background url("../assets/images/icon-17.png") 0 50% no-repeat
      padding-left 30px
      margin 0 17px 20px
    .subject-list
      display flex
      flex-wrap wrap
      justify-content start
      .subject-list--item
        background url("../assets/images/subject-btn-bg.png") 0 0 no-repeat
        width 339px
        height 65px
        margin 14px 17px 0
        cursor pointer
        .txt
          background url("../assets/images/icon-15.png") 100% 50% no-repeat
          color #000000
          font-size 18px
          margin 5px 30px 0 30px
          line-height 60px
          height 60px
        &:hover
          background-image url("../assets/images/subject-btn-bg--on.png")
          .txt
            background-image url("../assets/images/icon-16.png")
            color #ff0000

</style>
